<template>
  <a-layout class="material_emp antWordWrapStyle page-miH page-bgBack">
    <PageHeader @back="goback" subTitle="返回">{{ employInfo.name }}个人档案</PageHeader>
    <a-layout>
      <a-layout-sider width="226" class="border-r-line ta-center">
        <div class="photoBox">
          <a-row>
            <UploadAvatar
              :default-value="employInfo.empPhoto === null ? require('../../../../assets/icons/persony.png') : employInfo.empPhoto"
              border-radius="50%"
              @change="onChange"
            />
          </a-row>
          <a-row>
            <span class="h4">{{ employInfo.name }}</span>
          </a-row>
          <a-row class="header-box" style="margin-top: 10px">
            <a-tag style="margin-bottom: 4px" v-show="employInfo.verified" :color="primary_theme">已认证</a-tag>
            <a-tag style="margin-bottom: 4px" v-show="!employInfo.verified">未认证</a-tag>
            <a-tag style="margin-bottom: 4px" color="orange" v-if="employInfo.status === 1">待入职</a-tag>
            <a-tag style="margin-bottom: 4px" color="orange" v-else-if="employInfo.status === 4">离职</a-tag>
            <a-tag style="margin-bottom: 4px" :color="primary_theme" v-else-if="employInfo.status === 2">在职</a-tag>
            <div v-show="!$route.query.isDelete || $route.query.userId">
              <i class="iconfont icon-weixin" :class="WXuserInfo.isBindWechat ? 'binding' : ''"></i>
              {{ WXuserInfo.isBindWechat ? "已绑定" : "未绑定" }}
              <span class="bindingText" @click="reset">{{ WXuserInfo.isBindWechat ? "解绑" : "" }}</span>
            </div>
          </a-row>
          <!-- <a-row>
            <a-tooltip v-if="employInfo.userId == '' || employInfo.userId == null">
              <template slot="title">未开通账号</template>
              <xq-icon type="icon-xiaochengxu" class="bg_E2 w32 mr24" style="font-size: 30px" />
            </a-tooltip>
            <a-tooltip v-else>
              <template slot="title">已开通账号</template>
              <xq-icon type="icon-xiaochengxu" class="primary_color w32 mr24" style="font-size: 30px" />
            </a-tooltip>
          </a-row>-->
        </div>
        <a-row class="header-box">
          <RemarkLabel :remarkData="remarkData" :labelData="labelData" />
        </a-row>
        <a-row style="margin-bottom: 24px">
          <a-button size="large" @click="switchCompany" v-show="!$route.query.isDelete">更换用工单位</a-button>
        </a-row>
        <a-row style="margin-bottom: 24px">
          <a-button size="large" :disabled="employInfo.status != 2" @click="merberLeave" v-show="!$route.query.isDelete">办理离职</a-button>
        </a-row>
        <a-row>
          <a-button size="large" @click="delEmpInfo" :disabled="urr != null" v-show="!$route.query.isDelete">删除</a-button>
        </a-row>
      </a-layout-sider>
      <a-layout-content class="ph24 mb100">
        <a-spin :spinning="spinning">
          <a-row class="tabList">
            <div
              v-for="item in tabListType"
              :key="item.value"
              :class="tabselect == item.value ? 'select' : ''"
              style="cursor: pointer"
              @click="tabChange(item.value)"
            >
              {{ item.label }}
            </div>
          </a-row>
          <!-- 个人信息模块 -->
          <a-layout v-show="tabselect == 0">
            <!-- 个人信息-- 基本信息 -->
            <Collapse title="基本信息" @edit="onEdits('basicFormJson')" :disabled="basicFormJson.editable">
              <DynamicForm
                v-if="basicData"
                ref="basic"
                :dataSource="basicData"
                :editable.sync="basicFormJson.editable"
                :dynamicData="dynamicData"
                :formFields="basicFormJson.fields"
                :sortedKeys="basicFormJson.sortedKeys"
                :formConfig="{}"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
                @change="dynamicChange($event, 'basic', 'basicFormJson')"
              />
            </Collapse>

            <!-- 个人信息--联系信息 -->
            <Collapse title="联系信息" @edit="onEdits('contactFormJson')" :disabled="contactFormJson.editable">
              <DynamicForm
                v-if="contactData"
                ref="contact"
                :dataSource="contactData"
                :editable.sync="contactFormJson.editable"
                :dynamicData="dynamicData"
                :formFields="contactFormJson['fields']"
                :sortedKeys="contactFormJson.sortedKeys"
                :formConfig="{}"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
                @change="dynamicChange($event, 'contact', 'contactFormJson')"
              />
            </Collapse>
            <!-- 个人信息--身份信息 -->
            <Collapse
              title="身份证信息"
              @edit="onEdits('empIdCardFormJson')"
              :disabled="empIdCardFormJson.editable"
              v-if="empIdCardData !== null"
            >
              <DynamicForm
                v-if="empIdCardData"
                ref="empIdCard"
                :dataSource="empIdCardData"
                :editable.sync="empIdCardFormJson.editable"
                :dynamicData="dynamicData"
                :formFields="empIdCardFormJson.fields"
                :sortedKeys="empIdCardFormJson.sortedKeys"
                :formConfig="{}"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
                @change="dynamicChange($event, 'empIdCard', 'empIdCardFormJson')"
              />
            </Collapse>
            <!-- 家庭成员 -->
            <Collapse title="家庭成员" icon="plus" editText="新增" @edit="addFoms('empFamilyData')">
              <div v-if="empFamilyData">
                <div v-for="(item, index) in empFamilyData" :key="index">
                  <div class="rewards_top">
                    <a-button slot="right" type="link" icon="form" @click="item.editable = true" :disabled="item.editable">编辑</a-button>
                  </div>
                  <DynamicForm
                    :ref="'empFamily' + index"
                    :dataSource="item"
                    :editable.sync="item.editable"
                    :dynamicData="dynamicData"
                    :formFields="empFamilyFormJson['fields']"
                    :sortedKeys="empFamilyFormJson.sortedKeys"
                    :formConfig="{}"
                    :remove="item.remove ? false : true"
                    style="max-width: 880px; margin: 0 auto"
                    @cancel="dynamicCacels(item, index, 'empFamily', 'empFamilyFormJson')"
                    @remove="dynamicRemove(item, index, 'empFamily', 'empFamilyFormJson')"
                    @change="dynamicChanges($event, item, 'empFamily', 'empFamilyFormJson')"
                  />
                  <a-divider dashed v-if="index + 1 !== empFamilyData.length" />
                </div>
              </div>
            </Collapse>

            <!-- 紧急联系人 -->
            <Collapse title="紧急联系人" icon="plus" editText="新增" @edit="addFoms('empContactsData')">
              <div v-if="empContactsData">
                <div v-for="(item, index) in empContactsData" :key="index">
                  <div class="rewards_top">
                    <a-button slot="right" type="link" icon="form" @click="item.editable = true" :disabled="item.editable">编辑</a-button>
                  </div>
                  <DynamicForm
                    :ref="'empContacts' + index"
                    :dataSource="item"
                    :editable.sync="item.editable"
                    :dynamicData="dynamicData"
                    :formFields="empContactsFormJson['fields']"
                    :sortedKeys="empContactsFormJson.sortedKeys"
                    :formConfig="{}"
                    :remove="item.remove ? false : true"
                    style="max-width: 880px; margin: 0 auto"
                    @cancel="dynamicCacels(item, index, 'empContacts', 'empContactsFormJson')"
                    @remove="dynamicRemove(item, index, 'empContacts', 'empContactsFormJson')"
                    @change="dynamicChanges($event, item, 'empContacts', 'empContactsFormJson')"
                  />
                  <a-divider dashed v-if="index + 1 !== empContactsData.length" />
                </div>
              </div>
            </Collapse>

            <!-- 个人信息--教育经历 -->
            <Collapse title="教育经历" icon="plus" editText="新增" @edit="addFoms('empEducationData')">
              <div v-if="empEducationData">
                <div v-for="(item, index) in empEducationData" :key="index">
                  <div class="rewards_top">
                    <a-button slot="right" type="link" icon="form" @click="item.editable = true" :disabled="item.editable">编辑</a-button>
                  </div>
                  <DynamicForm
                    :ref="'empEducation' + index"
                    :dataSource="item"
                    :editable.sync="item.editable"
                    :dynamicData="dynamicData"
                    :formFields="empEducationFormJson['fields']"
                    :sortedKeys="empEducationFormJson.sortedKeys"
                    :formConfig="{}"
                    :remove="item.remove ? false : true"
                    style="max-width: 880px; margin: 0 auto"
                    @cancel="dynamicCacels(item, index, 'empEducation', 'empEducationFormJson')"
                    @remove="dynamicRemove(item, index, 'empEducation', 'empEducationFormJson')"
                    @change="dynamicChanges($event, item, 'empEducation', 'empEducationFormJson')"
                  />
                  <a-divider dashed v-if="index + 1 !== empEducationData.length" />
                </div>
              </div>
            </Collapse>

            <!-- 个人信息--工作经历 -->
            <Collapse title="工作经历" icon="plus" editText="新增" @edit="addFoms('empWorkData')">
              <div v-if="empWorkData">
                <div v-for="(item, index) in empWorkData" :key="index">
                  <div class="rewards_top">
                    <a-button slot="right" type="link" icon="form" @click="item.editable = true" :disabled="item.editable">编辑</a-button>
                  </div>
                  <DynamicForm
                    :ref="'empWork' + index"
                    :dataSource="item"
                    :editable.sync="item.editable"
                    :dynamicData="dynamicData"
                    :formFields="empWorkFormJson['fields']"
                    :sortedKeys="empWorkFormJson.sortedKeys"
                    :formConfig="{}"
                    :remove="item.remove ? false : true"
                    style="max-width: 880px; margin: 0 auto"
                    @cancel="dynamicCacels(item, index, 'empWork', 'empWorkFormJson')"
                    @remove="dynamicRemove(item, index, 'empWork', 'empWorkFormJson')"
                    @change="dynamicChanges($event, item, 'empWork', 'empWorkFormJson')"
                  />
                  <a-divider dashed v-if="index + 1 !== empWorkData.length" />
                </div>
              </div>
            </Collapse>

            <!-- 培训经历 -->
            <Collapse title="培训经历" icon="plus" editText="新增" @edit="addFoms('empTrainData')">
              <div v-if="empTrainData">
                <div v-for="(item, index) in empTrainData" :key="index">
                  <div class="rewards_top">
                    <a-button slot="right" type="link" icon="form" @click="item.editable = true" :disabled="item.editable">编辑</a-button>
                  </div>
                  <DynamicForm
                    :ref="'empTrain' + index"
                    :dataSource="item"
                    :editable.sync="item.editable"
                    :dynamicData="dynamicData"
                    :formFields="empTrainFormJson['fields']"
                    :sortedKeys="empTrainFormJson.sortedKeys"
                    :formConfig="{}"
                    :remove="item.remove ? false : true"
                    style="max-width: 880px; margin: 0 auto"
                    @cancel="dynamicCacels(item, index, 'empTrain', 'empTrainFormJson')"
                    @remove="dynamicRemove(item, index, 'empTrain', 'empTrainFormJson')"
                    @change="dynamicChanges($event, item, 'empTrain', 'empTrainFormJson')"
                  />
                  <a-divider dashed v-if="index + 1 !== empTrainData.length" />
                </div>
              </div>
            </Collapse>
          </a-layout>
          <!-- 在职信息模块 -->
          <a-layout v-show="tabselect == 1">
            <Collapse title="员工状态" @edit="onEdits('empStateFormJson')" :disabled="empStateFormJson.editable">
              <DynamicForm
                v-if="empStateData"
                ref="empState"
                :dataSource="empStateData"
                :editable.sync="empStateFormJson.editable"
                :dynamicData="dynamicData"
                :formFields="empStateFormJson.fields"
                :sortedKeys="empStateFormJson.sortedKeys"
                :formConfig="{}"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
                @itemChange="onItemChange"
                @change="dynamicChange($event, 'empState', 'empStateFormJson')"
              />
            </Collapse>
            <Collapse title="在职信息" @edit="onEdits('onJobFormJson')" :disabled="onJobFormJson.editable">
              <DynamicForm
                v-if="onJobData"
                ref="onJob"
                :dataSource="onJobData"
                :editable.sync="onJobFormJson.editable"
                :dynamicData="empInfoDynamicData"
                :formFields="onJobFormJson.fields"
                :sortedKeys="onJobFormJson.sortedKeys"
                :formConfig="{}"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
                @change="dynamicChange($event, 'onJob', 'onJobFormJson')"
                @keydownEnter="onItemKeydownEnter"
              />
            </Collapse>
            <Collapse title="档案信息" @edit="onEdits('fileFormJson')" :disabled="fileFormJson.editable">
              <DynamicForm
                v-if="fileData"
                ref="file"
                :dataSource="fileData"
                :editable.sync="fileFormJson.editable"
                :dynamicData="dynamicData"
                :formFields="fileFormJson.fields"
                :sortedKeys="fileFormJson.sortedKeys"
                :formConfig="{}"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
                @change="dynamicChange($event, 'file', 'fileFormJson')"
              />
            </Collapse>
            <Collapse title="奖惩记录" icon="plus" editText="新增" @edit="addFoms('rewardsPunishmentsData')">
              <div v-if="rewardsPunishmentsData">
                <div v-for="(item, index) in rewardsPunishmentsData" :key="index">
                  <div class="rewards_top">
                    <a-button slot="right" type="link" icon="form" @click="item.editable = true" :disabled="item.editable">编辑</a-button>
                  </div>
                  <DynamicForm
                    :ref="'rewardsPunishments' + index"
                    :dataSource="item"
                    :editable.sync="item.editable"
                    :dynamicData="dynamicData"
                    :formFields="rewardsPunishmentsFormJson['fields']"
                    :sortedKeys="rewardsPunishmentsFormJson.sortedKeys"
                    :formConfig="{}"
                    :remove="item.remove ? false : true"
                    style="max-width: 880px; margin: 0 auto"
                    @cancel="dynamicCacels(item, index, 'rewardsPunishments', 'rewardsPunishmentsFormJson')"
                    @remove="dynamicRemove(item, index, 'rewardsPunishments', 'rewardsPunishmentsFormJson')"
                    @change="dynamicChanges($event, item, 'rewardsPunishments', 'rewardsPunishmentsFormJson')"
                  />
                  <a-divider dashed v-if="index + 1 !== rewardsPunishmentsData.length" />
                </div>
              </div>
            </Collapse>
            <Collapse title="退休信息" @edit="onEdits('retireFormJson')" :disabled="retireFormJson.editable">
              <DynamicForm
                v-if="retireData"
                ref="retire"
                :dataSource="retireData"
                :editable.sync="retireFormJson.editable"
                :dynamicData="dynamicData"
                :formFields="retireFormJson.fields"
                :sortedKeys="retireFormJson.sortedKeys"
                :formConfig="{}"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
                @change="dynamicChange($event, 'retire', 'retireFormJson')"
              />
            </Collapse>
          </a-layout>
          <!-- 用工档案模块 -->
          <a-layout v-show="tabselect === 2 && allEmpValuesLoaded">
            <Collapse title="用工档案" :edit="false">
              <EmployeeFile ref="mychild" :emp-id-one="employInfoId" :edit="urr" />
            </Collapse>
          </a-layout>
          <!-- 纸质合同 -->
          <a-layout v-show="tabselect === 3 && allEmpValuesLoaded">
            <contract
              :employInfoId="employInfoId"
              :findEmpInfoRelationRes="findEmpInfoRelationRes"
              @updateContractData="loadEmpDetailInfo"
            />
          </a-layout>

          <!-- 工资社保 -->
          <a-layout v-if="tabselect == 4">
            <Collapse title="工资卡信息" @edit="onEdits('bankFormJson')" :disabled="bankFormJson.editable">
              <DynamicForm
                v-if="bankData"
                ref="bank"
                :dataSource="bankData"
                :editable.sync="bankFormJson.editable"
                :sortedKeys="bankFormJson.sortedKeys"
                :dynamicData="dynamicData"
                :formFields="bankFormJson['fields']"
                :formConfig="{}"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
                @change="dynamicChange($event, 'bank', 'bankFormJson')"
              />
            </Collapse>
            <Collapse v-if="!isJF" title="工资信息" :edit="false">
              <div class="FixedBox"><span class="FixedBoxLine"></span>固定薪资</div>
              <DynamicForm
                ref="salary"
                :dataSource="salarySumData"
                :editable.sync="editable.salary"
                :dynamicData="dynamicData"
                :formFields="FormJson['salarySum']['fields']"
                :formConfig="FormJson['salarySum']['config']"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
              />

              <!--工价薪资 -->
              <wagesPaid ref="wages"></wagesPaid>
            </Collapse>
          </a-layout>
          <a-layout v-if="tabselect == 7">
            <!-- 社保公积金信息  -->
            <Collapse title="社保公积金信息" @edit="onEdits('socAndPfFormJson')" :disabled="socAndPfFormJson.editable">
              <DynamicForm
                v-if="socAndPfData"
                ref="socAndPf"
                :dataSource="socAndPfData"
                :editable.sync="socAndPfFormJson.editable"
                :sortedKeys="socAndPfFormJson.sortedKeys"
                :dynamicData="dynamicData"
                :formFields="socAndPfFormJson['fields']"
                :formConfig="{}"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
                @change="dynamicChange($event, 'socAndPf', 'socAndPfFormJson')"
              />
            </Collapse>
            <Collapse
              title="社保公积金基数"
              @edit="onEdits('ProvidentFundBaseFormJson')"
              :edit="false"
              :disabled="ProvidentFundBaseFormJson.editable"
            >
              <a-alert style="margin: 16px 0" message="若需要修改社保相关信息，请前往社保模块" banner />
              <providentFundBase
                ref="provident"
                :editable="ProvidentFundBaseFormJson.editable"
                @closeEdit="closeEdit"
                @noSocialSecurityData="noSocialSecurityData"
                @turnOnEditingFun="turnOnEditingFun"
              ></providentFundBase>
            </Collapse>
          </a-layout>
          <!-- 材料附件 -->
          <a-layout v-if="tabselect == 5">
            <!-- 员工基本资料 -->
            <Collapse :edit="false" title="员工基本资料">
              <div v-if="annexFormJson && annexData" class="accessory_warp">
                <div v-for="(item, index) in annexFormJson" :key="index" class="accessory">
                  <div class="icon_warp">
                    <div class="shade" @click="enterImgBox('annex', item.fieldCode, item.fieldName)">
                      <a-icon type="eye" class="fs20 icon" style="color: #fdfdfd" />
                      <div class="num">{{ annexData[item.fieldCode] | fieldCodes }}</div>
                    </div>
                    <xq-icon
                      :type="fieldsIcon[item.fieldCode] ? fieldsIcon[item.fieldCode] : 'icon-zidingyi'"
                      style="font-size: 45px"
                      :class="annexData[item.fieldCode] && annexData[item.fieldCode] !== '' ? 'primary_color' : 'color_E2'"
                    ></xq-icon>
                  </div>
                  <div class="title">{{ item.fieldName }}</div>
                </div>
              </div>
            </Collapse>

            <!-- 员工档案资料 -->
            <Collapse title="员工档案资料" :edit="false">
              <div v-if="archiveFormJson && archiveData" class="accessory_warp">
                <div v-for="(item, index) in archiveFormJson" :key="index" class="accessory">
                  <div class="icon_warp">
                    <div class="shade" @click="enterImgBox('archive', item.fieldCode, item.fieldName)">
                      <a-icon type="eye" class="fs20 icon" style="color: #fdfdfd" />
                      <div class="num">{{ archiveData[item.fieldCode] | fieldCodes }}</div>
                    </div>
                    <xq-icon
                      :type="fieldsIcon[item.fieldCode] ? fieldsIcon[item.fieldCode] : 'icon-zidingyi'"
                      style="font-size: 45px"
                      :class="archiveData[item.fieldCode] && annexData[item.fieldCode] !== '' ? 'primary_color' : 'color_E2'"
                    ></xq-icon>
                  </div>
                  <div class="title">{{ item.fieldName }}</div>
                </div>
              </div>
            </Collapse>

            <!-- 员工离职资料 -->
            <Collapse title="员工离职资料" :edit="false">
              <div v-if="leaveOfficeFormJson && leaveOfficeData" class="accessory_warp">
                <div v-for="(item, index) in leaveOfficeFormJson" :key="index" class="accessory">
                  <div class="icon_warp">
                    <div class="shade" @click="enterImgBox('leaveOffice', item.fieldCode, item.fieldName)">
                      <a-icon type="eye" class="fs20 icon" style="color: #fdfdfd" />
                      <div class="num">{{ leaveOfficeData[item.fieldCode] | fieldCodes }}</div>
                    </div>
                    <xq-icon
                      :type="fieldsIcon[item.fieldCode] ? fieldsIcon[item.fieldCode] : 'icon-zidingyi'"
                      style="font-size: 45px"
                      :class="leaveOfficeData[item.fieldCode] && annexData[item.fieldCode] !== '' ? 'primary_color' : 'color_E2'"
                    ></xq-icon>
                  </div>
                  <div class="title">{{ item.fieldName }}</div>
                </div>
              </div>
            </Collapse>
          </a-layout>
          <!-- 个税信息 -->
          <a-layout v-if="tabselect == 6">
            <Collapse title="本年截止上个月个税累计值" @edit="onEdit('individual')" :disabled="editable.individual">
              <DynamicForm
                ref="individual"
                :dataSource="individualData"
                :editable.sync="editable.individual"
                :dynamicData="dynamicData"
                :formFields="FormJson['individual']['fields']"
                :formConfig="FormJson['individual']['config']"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
                @change="individualChange($event, 'individual')"
              />
            </Collapse>
            <Collapse title="本年专项附加扣除累计" @edit="onEdit('subjoin')" :disabled="editable.subjoin">
              <DynamicForm
                ref="subjoin"
                :dataSource="subjoinData"
                :editable.sync="editable.subjoin"
                :dynamicData="dynamicData"
                :formFields="FormJson['subjoin']['fields']"
                :formConfig="FormJson['subjoin']['config']"
                class="pt16"
                style="max-width: 880px; margin: 0 auto"
                @change="subjoinChange($event, 'subjoin')"
              />
            </Collapse>
          </a-layout>
          <!-- 人事异动记录 -->
          <a-layout v-if="tabselect === 9 && allEmpValuesLoaded">
            <Shangbao />
          </a-layout>
          <a-layout v-if="tabselect === 8 && allEmpValuesLoaded">
            <Daiyuchuli />
          </a-layout>
        </a-spin>
      </a-layout-content>
    </a-layout>
    <a-modal title="更换用工单位" :visible="switchVisible" @ok="handleOk2" @cancel="handleCancel" :width="500">
      <div style="width: 80%">
        <a-form
          :form="empyleeForm"
          v-bind="{
            labelCol: { span: 6 },
            wrapperCol: { span: 10 }
          }"
        >
          <a-row :gutter="24">
            <a-form-item label="原用工单位:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
              <a-select
                disabled
                :default-value="defaultCompanyName"
                show-search
                style="min-width: 240px; border: 1px solid #e8e8e8; border-radius: 15px"
              >
                <a-select-option value="1">{{ defaultCompanyName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-row>
          <a-row :gutter="24">
            <a-form-item label="新用工单位:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
              <a-select
                v-decorator="[
                  'companyId',
                  {
                    rules: [{ required: true, message: '请选择用工单位' }]
                  }
                ]"
                show-search
                placeholder="更换用工单位"
                option-filter-prop="children"
                :filter-option="filterOption"
                style="min-width: 240px; border: 1px solid #e8e8e8; border-radius: 15px"
                @change="changeId"
              >
                <a-select-option v-for="item in companyList" :key="item.id" :value="item.id" class="select-text">
                  {{ item.name }}
                </a-select-option>
                <a-icon slot="suffixIcon" type="caret-down" class="select-icon" style="display: block; margin-left: 10px" />
              </a-select>
            </a-form-item>
          </a-row>
          <a-row v-if="!isJF" :gutter="24">
            <a-form-item label="工作性质:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
              <a-select
                @change="postTypeChange"
                v-decorator="[
                  'postType',
                  {
                    rules: [{ required: true, message: '请选择工作性质' }]
                  }
                ]"
                placeholder="请选择工作性质"
              >
                <a-select-option v-for="item in postTypeOptions" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-row>
          <a-row :gutter="24">
            <a-form-item label="原用工单位离职日期:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
              <a-date-picker
                @change="onChangeDatepreQuitDate"
                v-decorator="[
                  'preQuitDate',
                  {
                    rules: [{ required: true, message: '请选择原用工单位离职日期' }]
                  }
                ]"
                style="width: 100%"
                type="date"
                placeholder="请选择原用工单位离职日期"
              />
            </a-form-item>
          </a-row>
          <a-row :gutter="24">
            <a-form-item label="新用工单位入职日期:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
              <a-date-picker
                v-decorator="[
                  'JoinDate',
                  {
                    rules: [{ required: true, message: '请选择新用工单位入职日期' }]
                  }
                ]"
                style="width: 100%"
                type="date"
                placeholder="请选择新用工单位入职日期"
                @change="JoinDateChange2"
              />
            </a-form-item>
          </a-row>
          <a-row :gutter="24" v-if="postTypeShow">
            <a-form-item label="员工状态:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
              <a-select
                v-decorator="[
                  'formalType',
                  {
                    rules: [{ required: true, message: '请填写员工状态' }]
                  }
                ]"
                placeholder="请选择状态"
                @change="selectChange2"
              >
                <a-select-option v-for="item in status2" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-row>
          <a-row v-if="testDate && postTypeShow" :gutter="24">
            <a-form-item label="试用期:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
              <a-row>
                <a-input-number
                  id="inputNumber"
                  v-decorator="[
                    'probationDays',
                    {
                      rules: [{ required: true, message: '请填写试用期' }]
                    }
                  ]"
                  style="width: 100%"
                  :min="0"
                  :formatter="(value) => `${value}天`"
                  placeholder="试用期天数"
                  @change="handleProba2"
                />
              </a-row>
            </a-form-item>
          </a-row>
          <a-row v-if="testDate && postTypeShow" :gutter="24">
            <a-form-item label="预计转正日期" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
              <a-date-picker v-decorator="['turnStraightDate']" style="width: 100%" type="date" placeholder="请选择" disabled />
            </a-form-item>
          </a-row>
          <a-row v-if="proRegularDateShow && postTypeShow" :gutter="24">
            <a-form-item label="预计转正日期" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
              <a-date-picker
                v-decorator="[
                  'turnStraightDate',
                  {
                    rules: [{ required: true, message: '请填写转正日期' }]
                  }
                ]"
                style="width: 100%"
                type="date"
                placeholder="请选择"
              />
            </a-form-item>
          </a-row>
        </a-form>
      </div>
    </a-modal>
    <!-- 离职 -->
    <a-drawer title="办理离职" :width="540" :visible="visibleLeaveDrawer" @close="onCloseDrawer('visibleLeaveDrawer')">
      <a-form :form="leaveForm" @submit="handleLeaveSubmit">
        <a-row :gutter="16">
          <a-form-item label="预计离职日期:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
            <a-date-picker
              v-decorator="[
                'preQuitDate',
                {
                  rules: [{ required: true, message: '请选择预计离职日期' }]
                }
              ]"
              type="date"
              :disabled-date="disabledDateRegularDate"
            />
          </a-form-item>
        </a-row>
        <a-row :gutter="16">
          <a-form-item label="离职原因:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
            <div class="selectBox" @click="showLeaveModal">
              <a-select
                ref="selectModal"
                v-decorator="['quitReason', { rules: [{ required: true, message: '请选择离职原因' }] }]"
                mode="multiple"
                onbeforeactivate="false"
                menu-item-selected-icon="none"
                :notFoundContent="null"
                @change="LeaveChange"
              />
            </div>
          </a-form-item>
        </a-row>
        <a-row :gutter="16">
          <a-form-item label="离职备注:" :label-col="{ span: 9 }" :wrapper-col="{ span: 15 }">
            <a-textarea v-decorator="['quitRemarks']" placeholder="请输入备注" :rows="4" />
          </a-form-item>
        </a-row>

        <div class="drawer-footer-box">
          <a-button :style="{ marginRight: '12px' }" @click="onCloseDrawer('visibleLeaveDrawer')">取消</a-button>
          <a-button type="primary" html-type="submit">确定</a-button>
        </div>
      </a-form>
    </a-drawer>
    <a-modal
      title="选择离职原因"
      :visible="visibleLeaveModal"
      :confirm-loading="false"
      cancel-text="取消"
      ok-text="确定"
      @ok="confirmLeaveModal"
      @cancel="onCloseDrawer('visibleLeaveModal')"
    >
      <a-checkbox-group v-model="checkedListGroup" @change="onChangeLeaveModal">
        <a-row class="lh40">
          <a-col class="drawer-title mb20" :span="24">主动原因</a-col>
          <a-col :span="12">
            <a-checkbox value="家庭原因">家庭原因</a-checkbox>
          </a-col>
          <a-col :span="12">
            <a-checkbox value="个人原因">个人原因</a-checkbox>
          </a-col>
          <a-col :span="12">
            <a-checkbox value="发展原因">发展原因</a-checkbox>
          </a-col>
          <a-col :span="12">
            <a-checkbox value="合同到期不续签">合同到期不续签</a-checkbox>
          </a-col>
          <a-col :span="12">
            <a-checkbox value="其他">其他</a-checkbox>
          </a-col>
          <a-col class="drawer-title mb20 mt20" :span="24">被动原因</a-col>
          <a-col :span="12">
            <a-checkbox value="协议解除">协议解除</a-checkbox>
          </a-col>
          <a-col :span="12">
            <a-checkbox value="无法胜任工作">无法胜任工作</a-checkbox>
          </a-col>
          <a-col :span="12">
            <a-checkbox value="经济性裁员">经济性裁员</a-checkbox>
          </a-col>
          <a-col :span="12">
            <a-checkbox value="严重违法违纪">严重违法违纪</a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>
    </a-modal>
    <a-modal
      title="选择审批模板"
      :visible="approvalModal"
      :confirm-loading="false"
      cancel-text="关闭"
      ok-text="下一步"
      @ok="handleApprovalSubmit"
      @cancel="approvalModal = false"
    >
      <div class="modal-box overflow-y400">
        <a-radio-group v-model="selectValue" style="width: 100%" @change="onselectValueChange">
          <a-row v-for="item in FlowsData" :key="item.id" type="flex" align="middle" class="mb20">
            <a-col class="icon mr8">
              <img style="width: 48px" :src="item.icon" alt="加载失败" />
            </a-col>
            <a-col>
              <a-row class="title1">{{ item.typeName }}</a-row>
              <a-row class="subTitle fs12 ta-left">{{ item.typeDesc }}</a-row>
            </a-col>
            <a-col class="ta-right" style="flex: 1">
              <a-radio :value="item.id" />
            </a-col>
          </a-row>
        </a-radio-group>
      </div>
    </a-modal>

    <!-- 审批 -->
    <a-modal
      :title="titleSubmit"
      :visible="visibleSubmit"
      :confirm-loading="false"
      cancel-text="关闭"
      :ok-text="oktext"
      @ok="onCloseDrawer('visibleSubmit')"
      @cancel="onCloseDrawer('visibleSubmit')"
    >
      <div v-if="FlowsData.length === 0" class="modal-box">
        <img class="w200" src="@/assets/img/1.png" alt />
        <h3 class="modal-title">
          <span v-show="flag === 1">提交成功</span>
          <span v-show="flag === 2">转正成功</span>
          <span v-show="flag === 3">已提交至待离职列表</span>
          <span v-show="flag === 4">已提交至待调岗列表</span>
        </h3>
        <p v-show="flag === 1" class="modal-content">已自动发送入职邀请至对方手机</p>
      </div>
      <div v-else class="modal-box">
        <img class="w200" src="@/assets/img/2.png" alt />
        <h3 class="modal-title">待审批</h3>
        <p class="modal-content">已提交至审批流程</p>
        <p class="modal-content">
          待审批通过后，
          <span v-show="flag === 1">可在入职管理里查看员工入职信息</span>
          <span v-show="flag === 2">即可转正</span>
          <span v-show="flag === 3">即可离职</span>
          <span v-show="flag === 4">即可调岗</span>
        </p>
        <p v-show="flag === 1">审批通过后自动发送入职邀请至对方手机</p>
      </div>
    </a-modal>

    <approvalDetail v-if="recordApprovalModal" :data="approvalDetailData" @visibleApprovalModal="recordApprovalModal = false" />
    <div class="detail-bottomInfo-wrapper" v-if="bottomInfo.lastEmpInfoListVO && !$route.query.Marking && bottomInfo.allNumber > 0">
      <div class="info-item info-side-left" @click="goEmployee(bottomInfo.lastEmpInfoListVO.id)">
        <a-icon type="left" />
        {{ bottomInfo.lastEmpInfoListVO.name == null ? "没有了" : bottomInfo.lastEmpInfoListVO.name }}
      </div>
      <div class="info-item info-side-middle">{{ `(${bottomInfo.currentPosition}/${bottomInfo.allNumber})` }}</div>
      <div class="info-item info-side-right" @click="goEmployee(bottomInfo.nextEmpInfoListVO.id)">
        {{ bottomInfo.nextEmpInfoListVO.name == null ? "没有了" : bottomInfo.nextEmpInfoListVO.name }}
        <a-icon type="right" />
      </div>
    </div>
  </a-layout>
</template>
<script>
import {
  getEmpInfoDetail,
  delEmpInfo,
  leavePosition,
  leavingFlows,
  getEmpCurrentPosition,
  getSpecial,
  editCompany,
  updateSpecial,
  getEmpTaxGrand,
  updateTaxGrand,
  checkEmpCanBeDeleted
} from "@/api/staff/staff";

import {
  empInfos,
  listCompanyModuleCodes,
  getEmpFieldValue,
  getAllEmpFieldValueReq,
  empFieldValueSave,
  empFieldValueUpdata,
  empFieldValueDelet,
  userInfoReq,
  unbindWechatReq,
  listAllByEmpId
} from "./api";
import { findEmpSocRelated, empUpdateSocDate } from "./component/api";
import { basicsPages } from "@/utils/dynamic";
import FormJson from "./FormJson"; //  引入FormJson数据
import { fieldsName, fieldsIcon, box, buildTabListType } from "./funcs";
import { dateDiff } from "@/utils/index";
const rightTime = ["年", "月", "日"];
const columns = [
  {
    title: "时间",
    dataIndex: "time"
  },
  {
    title: "异动类型",
    dataIndex: "age"
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" }
  }
];
const status = ["执行中", "已到期", "未执行"];
const tableData = [];
import { afterTime } from "@/utils/index";
import { UploadAvatar } from "xqjr-plugin-common";
import moment from "moment";
import EmployeeFile from "./component/employeeFile";
import approvalDetail from "./component/ApprovalDetail";
import RemarkLabel from "./component/remark&label";
import wagesPaid from "./component/wagesPaid";
import providentFundBase from "./component/providentFundBase";
import contract from "./component/contract";
import { mapState, mapGetters } from "vuex";
import Daiyuchuli from "@/views/alone/daiyuchuli/empinfo";
import Shangbao from "@/views/alone/shangbao/empDetail";
import request from "@/utils/request";
export default {
  components: {
    providentFundBase,
    wagesPaid,
    EmployeeFile,
    approvalDetail,
    UploadAvatar,
    RemarkLabel,
    contract,
    Daiyuchuli,
    Shangbao
  },
  inject: ["reload"],
  data() {
    return {
      contractSubjectSource: [],
      allEmpValuesLoaded: false,
      findEmpInfoRelationRes: null,
      spinning: false,
      employInfoValue: {},
      postTypeShow: true,
      oldchannelName: "",
      turnOnEditingShow: true,
      salarySumData: {},
      currentStatus: null,
      annexFormJson: [],
      archiveFormJson: [],
      leaveOfficeFormJson: [],
      primary_theme: "",
      channelName: "--",
      fieldsName,
      fieldsIcon,
      subjoinData: {},
      individualData: {},
      employInfoId: "",
      FormJson,
      empInfo: {},
      editable: {
        individual: false,
        subjoin: false,
        salary: false
      },
      isPost: false,
      basicFormJson: {}, // 基本信息
      contactFormJson: {},
      empIdCardFormJson: {},
      empFamilyFormJson: {},
      empContactsFormJson: {},
      empEducationFormJson: {},
      empWorkFormJson: {},
      empTrainFormJson: {},
      empStateFormJson: {},
      onJobFormJson: {},
      fileFormJson: {},
      rewardsPunishmentsFormJson: {},
      retireFormJson: {},
      bankFormJson: {},
      socAndPfFormJson: {},
      ProvidentFundBaseFormJson: {
        editable: false,
        edit: true
      }, // 社保公积金
      ProvidentFundBaseData: null, // 社保公积金
      basicData: null, // 基本信息
      contactData: null,
      empIdCardData: null,
      empFamilyData: null,
      empContactsData: null,
      empEducationData: null,
      empWorkData: null,
      empTrainData: null,
      empStateData: null,
      onJobData: null,
      fileData: null,
      rewardsPunishmentsData: null,
      retireData: null,
      bankData: null,
      socAndPfData: null,
      annexData: null,
      archiveData: null,
      leaveOfficeData: null,
      empyleeForm: this.$form.createForm(this),
      defaultCompanyName: "",
      userId: "",
      backState: 1,
      status,
      rightTime,
      itemType: null,
      itemDetail: null,
      ContractList: [],
      pageState: null,
      borderStyle1: "",
      borderStyle2: "",
      addVisible: false,
      urr: null, // 从员工概况进来的tag不为null
      bottomInfo: {},
      idCard: "",
      gender: "",
      birthday: "",
      age: "",
      columns,
      switchVisible: false,
      proRegularDateShow: false,
      testDate: false,
      tableData,
      avatarUrl: "",
      tabList: "",
      box,
      tabselect: 0,
      tabListType: [],
      status2: [
        { value: 1, label: "试用", name: "countWaitInformalAll", count: 0 },
        { value: 2, label: "正式", name: "countHasInformalAll", count: 0 }
      ],
      WXuserInfo: {},
      employInfo: {},
      isExpected: false,
      visibleLeaveDrawer: false,
      approvalModal: false,
      recordApprovalModal: false,
      selectValue: "",
      visibleLeaveModal: false,
      visibleSubmit: false,
      checkedListGroup: [],
      titleSubmit: "办理离职",
      companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
      FlowsData: [],
      redisValues: {},
      approvalDetailData: {},
      leaveForm: this.$form.createForm(this),
      flag: 0,
      oktext: "确定",
      selectId: "",
      moveTag: "",
      leaveTag: "",
      hoverStyle: null,
      deleteItem: null,
      deleteVisible: false,
      joinCityCode: "",
      remarkData: "",
      labelData: ""
    };
  },
  computed: {
    ...mapGetters(["isJF", "permissions", "permissions_dycl", "permissions_shangbao"]),
    ...mapState(["hr", "company"]),
    empInfoDynamicData() {
      return {
        contractSubjectDynamic: this.contractSubjectSource,
        depNameDynamic: this.company.companyDefSource,
        positionOptions: this.company.companyPosSource,
        postTypeLst: this.$store.state.enums.postTypeLst
      };
    },
    companyList() {
      return this.hr && this.hr.companyList ? this.hr.companyList.filter((item) => item.id !== this.companyId) : [];
    },
    channelsList() {
      return this.hr.channelsList;
    },
    postTypeOptions() {
      return this.$store.state.enums.postTypeLst;
    },
    dynamicData() {
      return {
        postTypeLst: this.$store.state.enums.postTypeLst
      };
    }
  },
  watch: {
    $route: {
      async handler(to, from, route) {
        if (!from) {
          this.spinning = true;
          this.primary_theme = localStorage.getItem("primary") || "#6a66f6";
          this.userId = this.$route.query.userId || "";
          this.employInfoId = this.$route.query.id;
          await this.init();
          this.getSpecialList();
          this.getEmpTaxGrandList();
          await this.getEmpInfos();
          this.getListCompanyModuleCodes();
          if (this.$route.query.userId) {
            this.getWXInfo();
          }
        }
      },
      immediate: true
    },
    permissions: {
      handler() {
        this.tabListType = buildTabListType(
          this.permissions_shangbao && this.permissions_shangbao.length > 0,
          this.permissions_dycl && this.permissions_dycl.length > 0
        );
      },
      immediate: true
    }
  },
  async created() {
    await this.loadContractSubjectSource();
  },
  mounted() {
    const idx = parseInt(this.$route.query.index);
    if (idx || idx === 0) {
      if (idx !== this.tabselect) {
        this.tabselect = idx;
      }
      this.tabList = this.$route.query.tabList;
    }
  },
  filters: {
    fieldCodes(value) {
      let num = 0;
      if (value && value !== null && value !== "null") {
        num = value.split(",").length;
      }

      return num;
    }
  },
  methods: {
    async loadContractSubjectSource() {
      await request({
        url: "/admin/api/v1/dictItems/selectAllDictItem?dictCode=1223",
        method: "get"
      })
        .then((res) => {
          this.contractSubjectSource = res.data ? res.data.map((item) => ({ label: item.dictItemKey, value: item.dictItemValue })) : [];
        })
        .catch((err) => {
          console.log("selectAllDictItem", err);
        });
    },
    disabledDateRegularDate(current) {
      if (this.empStateData && this.empStateData.joinDate) {
        return current && current < moment(this.empStateData.joinDate).subtract(1, "days");
      }
      return false;
    },
    onItemChange(val, item) {
      if (item && item.model === "joinDate") {
        try {
          this.$set(this.empStateData, "turnStraightDate", moment(val).add(this.empStateData.probationDays, "days"));
          this.$set(this.empStateData, "joinDateAge", dateDiff(moment(val).format("YYYY-MM-DD"), new Date(), "year"));
        } catch (err) {
          console.log(err);
        }
      }
      if (item && item.model === "probationDays") {
        try {
          this.$set(this.empStateData, "turnStraightDate", moment(this.empStateData.joinDate).add(val, "days"));
        } catch (err) {
          console.log(err);
        }
      }
    },
    postTypeChange(e) {
      if (e === 3 || e === 2) {
        this.postTypeShow = false;
      } else {
        this.postTypeShow = true;
      }
    },
    noSocialSecurityData() {
      this.ProvidentFundBaseFormJson.edit = true;
    },
    turnOnEditingFun(data) {
      this.turnOnEditingShow = data;
    },
    closeEdit() {
      this.ProvidentFundBaseFormJson.editable = false;
    },
    listAllByEmpIdFun() {
      if (this.employInfo.salaryType === 2 || this.employInfo.salaryType === 0) {
        this.salarySumData = {
          trainingSalarySum: null,
          officialSalarySum: null
        };
      } else {
        const data = {
          companyId: this.companyId,
          empId: this.defaultEmpId
        };
        listAllByEmpId(data)
          .then((res) => {
            if (res.data.length !== 0) {
              this.salarySumData = {
                trainingSalarySum:
                  res.data[0].trainingList.filter((z) => z.itemName === "基本工资").length !== 0
                    ? res.data[0].trainingList.filter((z) => z.itemName === "基本工资")[0].amount
                    : null,
                officialSalarySum:
                  res.data[0].officialList.filter((z) => z.itemName === "基本工资").length !== 0
                    ? res.data[0].officialList.filter((z) => z.itemName === "基本工资")[0].amount
                    : null
              };
            } else {
              this.salarySumData = {
                trainingSalarySum: null,
                officialSalarySum: null
              };
            }
          })
          .catch((err) => {
            console.log("err", err);
          });
      }
    },
    downloadImg() {
      this.$nextTick(() => {
        this.$refs.uploadTool.download();
      });
    },
    channelRulesChange(e) {
      this.channelsList.some((item, index) => {
        if (item.id === e) {
          this.channelName = item.name;
          return true;
        } else {
          this.channelName = "--";
        }
      });
      this.oldchannelName = this.channelName;
    },
    // 获取详情
    getWXInfo() {
      userInfoReq({ userId: this.userId })
        .then(({ data }) => {
          this.WXuserInfo = data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 解绑微信
    reset() {
      if (this.WXuserInfo.isBindWechat) {
        const userId = this.userId;
        const _this = this;
        this.$confirm({
          title: "您是否要解除微信绑定？解绑后将无法使用该微信号 登录此账号。",
          onOk() {
            unbindWechatReq({ userId })
              .then(async (data) => {
                if (data.success) {
                  _this.$notification.success({ message: "解绑成功" });
                  _this.getWXInfo();
                  await _this.getEmpInfos();
                  _this.getSpecialList();
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        });
      } else {
        this.showWeixin = true;
        this.getAppId();
      }
    },
    handelCity2(e) {
      const value = e.value;
      const label = e.label;
      this.joinCityCode = value[value.length - 1];
      this.joinCityName = label[label.length - 1];
    },
    switchCompany() {
      this.switchVisible = true;
      this.proRegularDateShow = false;
      this.testDate = false;
      this.joinCityCode = null;
      this.joinCityName = null;
      this.empyleeForm.resetFields();
    },
    deleteOk(item) {
      this.deleteVisible = true;
      this.deleteItem = item;
    },
    tabData(dateString1, dateString2) {
      var startDate = Date.parse(dateString1);
      var endDate = Date.parse(dateString2);
      if (startDate > endDate) {
        return 0;
      }
      if (startDate === endDate) {
        return 0;
      }
      var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
      return days;
    },
    onChangeDatepreQuitDate(date, dateString) {
      const JoinDate = this.empyleeForm.getFieldValue("JoinDate");
      if (JoinDate) {
        const data = this.tabData(JoinDate, moment(dateString).format("YYYY-MM-DD"));
        if (data !== 0) {
          this.$message.error("新用工单位入职日期应该大于等于原用工单位离职日期");
          setTimeout(() => {
            this.empyleeForm.setFieldsValue({
              preQuitDate: null
            });
          });
          return;
        }
      }
    },
    JoinDateChange2(value) {
      const preQuitDate = this.empyleeForm.getFieldValue("preQuitDate");
      if (preQuitDate) {
        const data = this.tabData(moment(value).format("YYYY-MM-DD"), moment(preQuitDate).format("YYYY-MM-DD"));
        if (data !== 0) {
          this.$message.error("新用工单位入职日期应该大于等于原用工单位离职日期");
          setTimeout(() => {
            this.empyleeForm.setFieldsValue({
              JoinDate: null
            });
          });
          return;
        }
      }
      // 根据试用期计算
      if (this.empyleeForm.getFieldValue("probationDays") === 0 || this.empyleeForm.getFieldValue("probationDays") === null) {
        return;
      }
      const newTime = afterTime(value, this.empyleeForm.getFieldValue("probationDays"));

      if (!Number.isNaN(newTime)) {
        this.empyleeForm.setFieldsValue({
          turnStraightDate: ""
        });
      } else {
        setTimeout(() => {
          this.empyleeForm.setFieldsValue({
            turnStraightDate: this.moment(newTime, "YYYY-MM-DD")
          });
        }, 300);
      }
    },
    showDetails(item) {
      this.itemDetail = JSON.parse(JSON.stringify(item));
      this.itemType = item.type;
      this.pageState = 4;
    },
    operationVisible(index, type) {
      const temp = JSON.parse(JSON.stringify(this.ContractList));
      temp[index].operationVisible = type;
      this.ContractList = temp;
    },
    handleVisible(index, type) {
      const temp = JSON.parse(JSON.stringify(this.ContractList));
      temp[index].statusVisible = type;
      this.ContractList = temp;
    },
    paperClick(e) {
      this.pageLastState = e;
      const primary = localStorage.getItem("primary");
      this.borderStyle1 = `border: 2px solid ${primary};background: ${primary}10;`;
      this.borderStyle2 = "";
    },
    electronicClick(e) {
      const primary = localStorage.getItem("primary");
      this.pageLastState = e;
      this.borderStyle1 = "";
      this.borderStyle2 = `border: 2px solid ${primary};background: ${primary}10;`;
    },
    addClick() {
      this.addVisible = true;
      this.pageLastState = null;
      this.borderStyle1 = "";
      this.borderStyle2 = "";
    },
    selectChange2(value) {
      if (value === 1) {
        this.proRegularDateShow = false;
        this.testDate = true;
        // 根据试用期计算
        if (this.empyleeForm.getFieldValue("JoinDate") != null) {
          const newTime = afterTime(this.empyleeForm.getFieldValue("JoinDate"), 0);
          setTimeout(() => {
            this.empyleeForm.setFieldsValue({});
          }, 300);
        } else {
          setTimeout(() => {
            this.empyleeForm.setFieldsValue({
              turnStraightDate: undefined
            });
          }, 300);
        }
      } else {
        this.proRegularDateShow = true;
        this.testDate = false;
        if (this.empyleeForm.getFieldValue("JoinDate") != null) {
          const newTime = afterTime(this.empyleeForm.getFieldValue("JoinDate"), 0);
          setTimeout(() => {
            this.empyleeForm.setFieldsValue({
              turnStraightDate: this.getMoment(newTime)
            });
          }, 300);
        } else {
          setTimeout(() => {
            this.empyleeForm.setFieldsValue({
              turnStraightDate: undefined
            });
          }, 300);
        }
      }
    },
    handleOk2(e) {
      e.preventDefault();
      this.empyleeForm.validateFields((err, values) => {
        if (!err) {
          if (values.postType === 2 || values.postType === 3) {
            values.formalType = 2;
            values.turnStraightDate = moment();
          }
          editCompany({
            companyId: this.companyId,
            empId: this.defaultEmpId,
            name: this.defaultEmpName,
            preQuitDate: values.preQuitDate.format("YYYY-MM-DD"),
            currentCompanyId: this.editCompanyId,
            currentPostType: values.postType,
            currentJoinDate: values.JoinDate.format("YYYY-MM-DD"),
            currentJoinCityCode: this.joinCityCode,
            currentFormalType: values.formalType,
            currentTurnStraightDate: values.turnStraightDate ? values.turnStraightDate.format("YYYY-MM-DD") : null,
            currentStatus: this.currentStatus === 1 ? 1 : 2,
            currentJoinCityName: this.joinCityName,
            currentPreJoinDate: values.JoinDate.format("YYYY-MM-DD"),
            currentEmployType: 1,
            currentProbationDays: values.probationDays
          }).then((res) => {
            this.$notification["success"]({
              message: "success",
              description: "更换成功"
            });
            this.$router.push({
              path: "/staff/employee",
              query: {}
            });
          });
        }
      });
    },
    stop(event) {
      event.stopPropagation();
    },
    async init() {
      if (this.$route.query.id) {
        this.employInfoId = this.$route.query.id;
        this.selectId = this.$route.query.selectId;
        this.moveTag = this.$route.query.moveTag;
        this.leaveTag = this.$route.query.leaveTag;
        if (this.$route.query.urr !== undefined) {
          // 从员工概况进来的tag不为null
          this.urr = this.$route.query.urr;
        }
      }

      if (this.$route.query.companyId) {
        this.companyId = this.$route.query.companyId;
      }

      if (this.employInfo.formatDate === 2) {
        this.isExpected = true;
      }
      this.compoutBG();
      this.getBottomInfo();
      await this.initData();
    },
    updateInfo() {
      this.init();
    },
    handleCancel() {
      this.switchVisible = false;
    },
    getBottomInfo() {
      const data = {
        ...this.$route.query.searchFormData,
        empId: this.employInfoId,
        companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId
      };
      getEmpCurrentPosition(data)
        .then((res) => {
          this.bottomInfo = res.data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    goEmployee(id) {
      if (id !== null) {
        const query = JSON.parse(JSON.stringify(this.$route.query));
        query.id = id;
        this.$router.push({
          query
        });

        setTimeout(async () => {
          await this.init();
          this.getSpecialList();
          this.getEmpTaxGrandList();
          await this.getEmpInfos();
          this.getListCompanyModuleCodes();
          if (this.$route.query.userId) {
            this.getWXInfo();
          }
        }, 200);
      }
    },
    loadEmpDetailInfo() {
      getEmpInfoDetail(
        {
          id: this.employInfoId,
          companyId: this.companyId
        },
        this.urr
      ).then((res) => {
        this.findEmpInfoRelationRes = res.data;
        this.$nextTick(() => {
          if (this.$refs.wages) {
            this.$refs.wages.empInfosShowFun(this.defaultEmpId, this.companyId, this.findEmpInfoRelationRes);
          }
        });
      });
    },
    goTabShow() {
      if (this.tabselect === 4 || this.tabselect === "4") {
        this.loadEmpDetailInfo();
      } else if (this.tabselect === 7 || this.tabselect === "7") {
        setTimeout(() => {
          this.$nextTick(() => {
            this.ProvidentFundBaseFormJson.editable = false;
            if (this.$refs.provident) {
              this.$refs.provident.findEmpSocRelatedFun(this.defaultEmpId, this.companyId);
            }
          });
        }, 2000);
      }
    },
    selectChange(value) {
      setTimeout(() => {}, 0);
      if (value === 1) {
        this.isExpected = true;
      } else {
        this.isExpected = false;
      }
    },
    // 各项数据源
    async getEmpFieldValuesData(moduleData, moduleCode) {
      if (moduleData.data) {
        for (const key in moduleData.data) {
          if (moduleData.data[key] === "true") {
            moduleData.data[key] = "true";
          }
          if (moduleData.data[key] === "false") {
            moduleData.data[key] = "false";
          }
        }
        if (moduleCode === "empState") {
          this[moduleCode + "Data"] = {
            ...moduleData.data,
            joinDateAge: moduleData.data.joinDate
              ? dateDiff(moment(moduleData.data.joinDate).format("YYYY-MM-DD"), new Date(), "year")
              : 0.0
          };
        } else {
          this[moduleCode + "Data"] = moduleData.data;
        }
      }
      if (moduleData.listData) {
        moduleData.listData.forEach((element) => {
          for (const key in element) {
            if (element[key] === true) {
              element[key] = "true";
            }
            if (element[key] === false) {
              element[key] = "false";
            }
          }
        });
        if (moduleData.listData.length === 0) {
          moduleData.listData.push({ editable: false });
        }
        moduleData.listData.forEach((esy) => {
          esy.editable = false;
        });
        this[moduleCode + "Data"] = moduleData.listData;
      }
      if (moduleCode === "bank") {
        this.isPost = moduleData.isPost;
      }
    },
    // 各项数据源
    async getEmpFieldValues(moduleCode) {
      if (!this.$route.query.id) {
        return;
      }
      await getEmpFieldValue({
        moduleCode,
        companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
        empInfoId: this.$route.query.id
      })
        .then((result) => {
          if (result.data.data) {
            for (const key in result.data.data) {
              if (result.data.data[key] === "true") {
                result.data.data[key] = "true";
              }
              if (result.data.data[key] === "false") {
                result.data.data[key] = "false";
              }
            }
            if (moduleCode === "empState") {
              this[moduleCode + "Data"] = {
                ...result.data.data,
                joinDateAge: result.data.data.joinDate
                  ? dateDiff(moment(result.data.data.joinDate).format("YYYY-MM-DD"), new Date(), "year")
                  : 0.0
              };
            } else {
              this[moduleCode + "Data"] = result.data.data;
            }
          }
          if (result.data.listData) {
            result.data.listData.forEach((element) => {
              for (const key in element) {
                if (element[key] === true) {
                  element[key] = "true";
                }
                if (element[key] === false) {
                  element[key] = "false";
                }
              }
            });
            if (result.data.listData.length === 0) {
              result.data.listData.push({ editable: false });
            }
            result.data.listData.forEach((esy) => {
              esy.editable = false;
            });
            this[moduleCode + "Data"] = result.data.listData;
          }
          if (moduleCode === "bank") {
            this.isPost = result.data.isPost;
          }
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    //  本年专项附加扣除累计
    getSpecialList() {
      getSpecial({
        month: parseInt(moment().format("MM")) === 1 ? 12 : parseInt(moment().format("MM")) - 1,
        year: parseInt(moment().format("MM")) === 1 ? moment().format("YYYY") - 1 : moment().format("YYYY"),
        empId: this.$route.query.id,
        companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId
      }).then((res) => {
        this.subjoinData = res.data
          ? { ...res.data, empId: this.$route.query.id }
          : {
              month: parseInt(moment().format("MM")) === 1 ? 12 : parseInt(moment().format("MM")) - 1,
              year: parseInt(moment().format("MM")) === 1 ? moment().format("YYYY") - 1 : moment().format("YYYY"),
              empId: this.$route.query.id,
              companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId
            };
      });
    },
    // 获取本年截止上个月个税累计值
    getEmpTaxGrandList() {
      getEmpTaxGrand({
        monthly: moment().format("MM") > 1 ? parseInt(moment().format("MM") - 1) : 12,
        yearly: moment().format("MM") > 1 ? parseInt(moment().format("YYYY")) : parseInt(moment().format("YYYY") - 1),
        // companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
        empId: this.$route.query.id
      }).then((res) => {
        this.individualData = res.data
          ? {
              ...res.data,
              companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
              empId: this.$route.query.id
            }
          : {
              monthly: moment().format("MM") > 1 ? parseInt(moment().format("MM") - 1) : 12,
              yearly: moment().format("MM") > 1 ? parseInt(moment().format("YYYY")) : parseInt(moment().format("YYYY") - 1),
              companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
              empId: this.$route.query.id
            };
      });
    },
    addFoms(sign) {
      this[sign].unshift({ editable: true, remove: true });
    },
    dynamicCacels(value, index, sign, edit) {
      if (!value.id && value.remove) {
        this[sign + "Data"].splice(index, 1);
      }
    },
    dynamicRemove(value, index, sign, edit) {
      if (value.id) {
        empFieldValueDelet({
          companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
          empInfoId: this.$route.query.id,
          moduleCode: sign,
          data: value
        })
          .then((result) => {
            this.getEmpFieldValues(sign);
            this[edit].editable = false;
            this.$message.success("删除成功!");
          })
          .catch((err) => {
            console.log("debug log --> ", err);
          });
      } else {
        this.$message.success("删除成功!");
        this[sign + "Data"].splice(index, 1);
      }
    },
    dynamicChanges(value, item, sign, edit) {
      if (value) {
        for (const key in value) {
          if (value[key] === "true") {
            value[key] = true;
          }
          if (value[key] === "false") {
            value[key] = false;
          }
        }
        if (!item.id) {
          for (const key in value) {
            if (value[key] === "true") {
              value[key] = true;
            }
            if (value[key] === "false") {
              value[key] = false;
            }
          }
          empFieldValueSave({
            companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
            empInfoId: this.$route.query.id,
            moduleCode: sign,
            data: value
          })
            .then((result) => {
              this.$message.success("编辑成功!");
              this.getEmpFieldValues(sign);
              this[edit].editable = false;
            })
            .catch((err) => {
              console.log("debug log --> ", err);
            });
        } else {
          empFieldValueUpdata({
            companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
            empInfoId: this.$route.query.id,
            moduleCode: sign,
            data: { ...item, ...value }
          })
            .then((result) => {
              this.$message.success("编辑成功!");
              this.getEmpFieldValues(sign);
              this[edit].editable = false;
            })
            .catch((err) => {
              console.log("debug log --> ", err);
            });
        }
      }
    },
    async onItemKeydownEnter(val, item) {
      try {
        if (item.model === "contractSubject") {
          const lstFit = this.contractSubjectSource.filter((item) => item.value === val);
          if (lstFit.length <= 0) {
            await request({
              url: "/admin/api/v1/dictItems",
              method: "post",
              data: {
                dictItemValue: val,
                dictItemKey: val,
                dictCode: "1223"
              }
            })
              .then(async () => {
                await this.loadContractSubjectSource();
                this.onJobData = {
                  ...this.onJobData,
                  contractSubject: val
                };
              })
              .catch((err) => {
                console.log("addDictItems", err);
              });
          }
        }
      } catch (err) {
        console.log("onItemKeydownEnter", err);
      }
    },
    dynamicChange(value, sign, edit) {
      if (value) {
        if (value.preJoinDep && Object.prototype.toString.call(value.preJoinDep) === "[object Array]") {
          value.preJoinDep = value.preJoinDep.join(",");
        }
        if (value.preJoinPosition && Object.prototype.toString.call(value.preJoinPosition) === "[object Array]") {
          value.preJoinPosition = value.preJoinPosition.join(",");
        }
        if (value.joinDate && !value.probationDays) {
          value.probationDays = 0;
        }
        for (const key in this[edit].fields) {
          if (this[edit].fields[key].type === "area") {
            if (value[key]) {
              value[key] = JSON.parse(JSON.stringify(value[key])).join(",");
            }
          }
        }
        if (sign === "bank") {
          if (this.isPost === true) {
            empFieldValueSave({
              companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
              empInfoId: this.$route.query.id,
              moduleCode: sign,
              data: value
            })
              .then((result) => {
                this.getEmpFieldValues(sign);
                this[edit].editable = false;
              })
              .catch((err) => {
                console.log("debug log --> ", err);
              });
          } else {
            empFieldValueUpdata({
              companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
              empInfoId: this.$route.query.id,
              moduleCode: sign,
              data: value
            })
              .then((result) => {
                this.$message.success("编辑成功!");
                this.getEmpFieldValues(sign);
                this[edit].editable = false;
              })
              .catch((err) => {
                console.log("debug log --> ", err);
              });
          }
        } else if (sign === "socAndPf") {
          let val = {};
          const data = {
            companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
            empId: this.$route.query.id
          };
          findEmpSocRelated(data)
            .then((res) => {
              val = res.data;
              const valUpdata = { ...val, ...value };
              empUpdateSocDate(valUpdata)
                .then((res) => {
                  this.getempFieldValueSave(value, sign, edit);
                })
                .catch((err) => {
                  console.log("err.msg", err.data);
                });
            })
            .catch((err) => {
              console.log("err.msg", err.data);
            });
        } else {
          this.getempFieldValueSave(value, sign, edit);
        }
      }
    },
    getempFieldValueSave(value, sign, edit) {
      empFieldValueSave({
        companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId,
        empInfoId: this.$route.query.id,
        moduleCode: sign,
        data: value
      })
        .then((result) => {
          this.getEmpFieldValues(sign);
          this[edit].editable = false;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    individualChange(value, refName) {
      if (value) {
        updateTaxGrand({ ...this.individualData, ...value })
          .then((res) => {
            this.$message.success("修改成功!");
            this.editable[refName] = false;
            this.getEmpTaxGrandList();
          })
          .catch((errs) => {
            console.log("debug log --> ", errs);
          })
          .finally(() => {});
      }
    },
    subjoinChange(value, refName) {
      if (value) {
        updateSpecial({ ...this.subjoinData, ...value })
          .then((res) => {
            this.$message.success("修改成功!");

            this.editable[refName] = false;
            this.getSpecialList();
          })
          .catch((errs) => {
            console.log("debug log --> ", errs);
          })
          .finally(() => {});
      }
    },
    onEdits(sign) {
      this[sign].editable = true;
    },
    onEdit(data) {
      this.editable[data] = true;
    },
    // 获取员工信息表格数据
    getListCompanyModuleCodes() {
      const companyId = this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId;
      const empInfoId = this.$route.query.id;
      listCompanyModuleCodes({ companyId, empInfoId })
        .then(async (result) => {
          const moduleCodeList = [];
          for (let i = 0; i < result.data.length; i++) {
            const element = result.data[i];
            moduleCodeList.push(element.moduleCode);
            if (!["annex", "archive", "leaveOffice"].includes(element.moduleCode)) {
              this[element.moduleCode + "FormJson"] = {
                editable: false,
                fields: {},
                sortedKeys: {}
              };
              const { fields, fieldKeys } = basicsPages(this.employInfo.idCard, element.moduleCode, [
                ...(element.fieldList && element.fieldList.length > 0 ? element.fieldList : []),
                ...(element.additionalFieldList && element.additionalFieldList.length > 0 ? element.additionalFieldList : [])
              ]);
              this[element.moduleCode + "FormJson"].fields = fields;
              this[element.moduleCode + "FormJson"].sortedKeys =
                this.isJF && element.moduleCode === "empState" ? fieldKeys.filter((item) => item !== "postType") : fieldKeys;
              if (element.moduleCode === "socAndPf" && this.socAndPfFormJson.fields.insuredCity) {
                this.socAndPfFormJson.fields.insuredCity.extend = {
                  level: 2
                };
              }
            } else {
              this[element.moduleCode + "FormJson"] = [
                ...(element.fieldList && element.fieldList.length > 0 ? element.fieldList : []),
                ...(element.additionalFieldList && element.additionalFieldList.length > 0 ? element.additionalFieldList : [])
              ];
            }
          }
          await getAllEmpFieldValueReq({ companyId, empInfoId, moduleCodeList })
            .then((res) => {
              if (res && res.data) {
                this.allEmpValuesLoaded = true;
                for (let k = 0; k < moduleCodeList.length; k++) {
                  this.getEmpFieldValuesData(res.data[moduleCodeList[k]], moduleCodeList[k]);
                }
              }
            })
            .catch((err) => {
              console.log(err);
            });
          this.spinning = false;
        })
        .catch((err) => {
          this.spinning = false;
          console.log("debug log --> ", err);
        });
    },
    // 获取个人信息
    getEmpInfos() {
      empInfos(
        {
          companyId: this.$route.query.companyId ? this.$route.query.companyId : this.$store.state.hr.companyId
        },
        this.$route.query.id
      )
        .then((result) => {
          for (const key in result.data) {
            if (result.data[key] === true) {
              result.data[key] = "true";
            }
            if (result.data[key] === false) {
              result.data[key] = "false";
            }
          }
          this.empInfo = result.data;
          if (this.empInfo.joinCityCode === "") {
            this.empInfo.joinCityCode = [];
          }
          if (typeof this.empInfo.preJoinDep === "string" && this.empInfo.preJoinDep === "[]") {
            this.empInfo.preJoinDep = null;
          }
          if (typeof this.empInfo.preJoinPosition === "string" && this.empInfo.preJoinPosition === "[]") {
            this.empInfo.preJoinPosition = null;
          }
          if (this.empInfo.preJoinDep && this.empInfo.preJoinDep !== "") {
            this.empInfo.preJoinDep = this.empInfo.preJoinDep.split(",");
          }
          if (this.empInfo.preJoinDep === "" || this.empInfo.preJoinDep === null) {
            this.empInfo.preJoinDep = [];
          }
          if (this.empInfo.preJoinPosition && this.empInfo.preJoinPosition !== "") {
            this.empInfo.preJoinPosition = this.empInfo.preJoinPosition.split(",");
          }
          if (this.empInfo.preJoinPosition === "" || this.empInfo.preJoinPosition === null) {
            this.empInfo.preJoinPosition = [];
          }
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    // 处理身份信息
    getInfo() {
      const iden = this.employInfo.idCard || "";
      const myDate = new Date();
      const month = myDate.getMonth() + 1;
      const day = myDate.getDate();
      let gender = null;

      if (iden.length === 18) {
        this.employInfo.age = myDate.getFullYear() - iden.substring(6, 10) - 1;
        gender = iden.substring(16, 17);
        this.employInfo.birthday = iden.substring(6, 10) + "-" + iden.substring(10, 12) + "-" + iden.substring(12, 14);
        if (iden.substring(10, 12) < month || (iden.substring(10, 12) === month && iden.substring(12, 14) <= day)) {
          this.employInfo.age++;
        }
      }
      if (iden.length === 15) {
        this.employInfo.age = myDate.getFullYear() - iden.substring(6, 8) - 1901;
        gender = iden.substring(13, 14);
        this.employInfo.birthday = "19" + iden.substring(6, 8) + "-" + iden.substring(8, 10) + "-" + iden.substring(10, 12);
        if (iden.substring(8, 10) < month || (iden.substring(8, 10) === month && iden.substring(10, 12) <= day)) {
          this.employInfo.age++;
        }
      }
      if (gender === null) {
        this.employInfo.gender = null;
      } else if (gender % 2 === 0) {
        this.employInfo.gender = 2;
      } else if (gender % 2 === 1) {
        this.employInfo.gender = 1;
      }
    },
    enterImgBoxAdditional(item, type) {
      this.$router.push({
        path: location.hash.includes("/staffc") ? "/staffc/fileformAdditional" : "/staff/fileformAdditional",
        query: {
          employInfoId: this.employInfo.id,
          companyId: this.companyId,
          id: item.id,
          fileType: type,
          edit: this.urr // 用来控制是否有读写权限
        }
      });
    },
    enterImgBox(sign, fieldCode, fieldName) {
      this.$router.push({
        path: location.hash.includes("/staffc") ? "/staffc/fileform" : "/staff/fileform",
        query: {
          fieldCode,
          sign,
          name: this.empInfo.name,
          fieldName,
          userId: this.userId,
          employInfoId: this.employInfoId
        }
      });
    },
    showDetail(record) {
      this.recordApprovalModal = true;
      this.approvalDetailData = record;
    },
    tabChange(index) {
      const query = JSON.parse(JSON.stringify(this.$router.history.current.query)); // 取当前路由query值并且深拷贝
      const path = this.$router.history.current.path; // 取当前路由地址
      query.index = index; // 修改变动的query值
      this.$router.push({ path, query }); // 改变query值
      this.tabselect = index;
      this.pageState = 3;
      setTimeout(() => {
        if (this.index === 1) {
          this.getInfo();
        }
      });
      this.goTabShow();
    },
    edit(tag, refName) {
      this.$nextTick(() => {
        this.$refs[refName].boxshow = true;
      });
      this.box[tag] = undefined;
    },
    async cancelEdit(tag) {
      if (this.backState === 2) {
        await this.initData();
        this.pageState = 3;
      } else {
        this.pageState = 3;
        this.box[tag] = "base";
        await this.initData();
      }
    },
    getMoment(date) {
      return date ? this.moment(date) : null;
    },
    onCloseDrawer(tag) {
      this[tag] = false;
      this.init();

      this.getEmpTaxGrandList();
    },
    onselectValueChange(e) {
      this.selectValue = e.target.value;
    },
    handleApprovalSubmit() {
      var redisValues = this.redisValues;
      redisValues.approFlowId = this.selectValue;

      if (this.flag === 1) {
        this.funcSaveEmpInfoPre(redisValues);
      } else if (this.flag === 2) {
        this.funcTransferRegular(redisValues);
      } else if (this.flag === 3) {
        this.funcLeavePosition(redisValues);
      } else if (this.flag === 4) {
        this.funcTransferJob(redisValues);
      }
    },
    confirmLeaveModal() {
      this.visibleLeaveModal = false;
      this.leaveForm.setFieldsValue({
        quitReason: this.checkedListGroup
      });
    },
    onChangeLeaveModal(checkedValues) {
      this.checkedListGroup = checkedValues;
    },
    LeaveChange(tag) {
      this.checkedListGroup = tag;
    },
    showLeaveModal() {
      this.visibleLeaveModal = true;
      this.$nextTick(() => {
        this.$refs.selectModal.blur();
      });
    },
    // 办理离职
    merberLeave() {
      this.visibleLeaveDrawer = true;
    },
    // 获取某公司离职可用的的所有审批流程
    leavingFlowsFunc() {
      leavingFlows(this.companyId).then((res) => {
        this.FlowsData = res.data;
        this.leaveForm.validateFields((err, values) => {
          if (!err) {
            const len = this.FlowsData && this.FlowsData.length;

            values.companyId = this.companyId;
            values.empIds = [this.employInfoId];
            values.quitReason = values.quitReason.join(",");
            this.flag = 3;

            // 没有审批 穿空 1个传当前值 多个选择
            if (len === 1) {
              values.approFlowId = this.FlowsData[0].id;
              this.funcLeavePosition(values);
            } else if (len > 1) {
              this.approvalModal = true;
              this.selectValue = this.FlowsData[0].id;
              this.redisValues = values;
            } else {
              values.approFlowId = "";
              this.funcLeavePosition(values);
            }
          }
        });
      });
    },
    handleLeaveSubmit(e) {
      e.preventDefault();
      this.leavingFlowsFunc();
    },
    funcLeavePosition(values) {
      leavePosition(values).then((res) => {
        this.onCloseDrawer("visibleLeaveDrawer");
        this.visibleSubmit = true;
        this.approvalModal = false;
        this.oktext = "确定";
        this.titleSubmit = "办理离职";
      });
    },

    async initData() {
      if (this.tabselect === 2) {
        this.$nextTick(() => {
          this.$refs.mychild.refresh(this.employInfoId);
        });
      }
      await getEmpInfoDetail(
        {
          id: this.employInfoId,
          companyId: this.companyId
        },
        this.urr
      ).then((res) => {
        this.findEmpInfoRelationRes = res.data;
        if (res.data) {
          this.channelRulesChange(res.data.channelId);
          if (res.data.empPaperContractList) {
            res.data.empPaperContractList.forEach((item, index) => {
              // 纸质合同状态
              item.state = 1;
            });
          } else {
            res.data.empPaperContractList = [];
          }
          if (res.data.empContractList) {
            res.data.empContractList.forEach((item, index) => {
              // 电子合同状态
              item.state = 2;
            });
          } else {
            res.data.empContractList = [];
          }
          this.ContractList = res.data.empPaperContractList.concat(res.data.empContractList); // 合并
        } else {
          this.ContractList = [];
        }
        if (this.tabselect === 3 && this.pageState === 4) {
          this.pageState = 3;
          this.tabselect = 3;
        }
        const data = res.data;
        this.currentStatus = data ? data.status : null;
        if (res.data && res.data.empRewardPunishList && res.data.empRewardPunishList !== null) {
          res.data.empRewardPunishList.map((item) => {
            item.amount = item.amount / 100;
          });
        }
        if (res.data && res.data.empWorkList && res.data.empWorkList !== null) {
          res.data.empWorkList.map((item) => {
            item.leaveSalary = item.leaveSalary / 100;
          });
        }

        this.defaultEmpName = data.name;
        this.defaultEmpId = data.id;

        this.defaultCompanyName = data.companyName;
        this.idCard = data.idCard;
        this.gender = data.gender;
        this.age = data.age;
        this.birthday = data.birthday;
        this.employInfo = res.data;
        this.listAllByEmpIdFun(); // 查 固定薪资
        this.goTabShow();
        this.employInfo.retirementStatus = this.employInfo.retirementStatus ? 1 : 0;
        if (this.employInfo.isFirstPf !== null) {
          this.employInfo.isFirstPf = this.employInfo.isFirstPf ? 1 : 0;
        }
        if (this.employInfo.isFirstSoc !== null) {
          this.employInfo.isFirstSoc = this.employInfo.isFirstSoc ? 1 : 0;
        }
        this.remarkData = res.data?.remark || "";
        this.labelData = res.data?.tag || "";
      });
    },
    goback() {
      const url = this.$route.query.prevpage;
      if (this.$route.query.prevpage) {
        if (url.substring(0, 13) === "/staff/manger") {
          this.$router.push({
            path: url.substring(0, 13)
          });
        } else {
          this.$router.push({
            path: this.$route.query.prevpage
          });
        }
      } else {
        this.$router.push({
          path: "/staff/employee"
        });
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    onChange(e) {
      if (e) {
        this.employInfo.empPhoto = e;
        this.$request({
          method: "PUT",
          url: "hr/api/v1/empInfos",
          data: {
            empPhoto: e,
            id: this.employInfo.id,
            phone: this.employInfo.phone
          }
        })
          .then(({ success }) => {
            if (success) {
              this.$notification["success"]({ message: "修改成功" });
            }
          })
          .catch((err) => {
            throw new Error(err);
          });
      }
    },

    handleProba2(value) {
      const newTime = afterTime(this.empyleeForm.getFieldValue("JoinDate"), value);
      setTimeout(() => {
        this.empyleeForm.setFieldsValue({
          turnStraightDate: this.moment(newTime, "YYYY-MM-DD")
        });
      }, 300);
    },
    alertResultMessage(result) {
      let type = "success";
      if (result.code !== 200) {
        type = "error";
      }
      this.$notification[type]({
        message: result.msg
      });
    },
    getdelEmpInfo() {
      var that = this;
      delEmpInfo({
        id: that.employInfoId,
        companyId: that.companyId
      }).then((res) => {
        that.alertResultMessage(res);
        if (res.code === 200) {
          this.$router.push({ path: "/staff/employee", replace: true });
        }
      });
    },
    delEmpInfo: function () {
      var that = this;
      that.$confirm({
        title: "删除员工",
        content: "此操作将永久删除该员工, 是否继续?",
        cancelText: "取消",
        okText: "确定",
        onOk() {
          checkEmpCanBeDeleted(that.employInfoId).then((res) => {
            if (res.data) {
              that.getdelEmpInfo();
            } else {
              that.$notification["error"]({
                message: "提醒",
                description: "该员工正在参保，不允许删除，请先进行社保减员"
              });
            }
          });
        }
      });
    },
    employeeFlase() {
      this.editable.employee = false;
      this.channelName = this.oldchannelName;
    },
    async changeId(id) {
      this.editCompanyId = id;
    },
    compoutBG(id) {
      let arr = [];
      let url;
      if (this.employInfo[id]) {
        arr = this.employInfo[id].split(",");
        url = arr[0] ? arr[0] : "none";
      }

      return {
        number: arr.length,
        url: url
      };
    }
  }
};
</script>
<style lang="scss">
.antWordWrapStyle {
  .ant-form-item-children {
    word-wrap: break-word;
  }
}
</style>
<style lang="scss" scoped>
@import "styles/detail.scss";
</style>
